<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
    <script src="axios.js"></script>
    <style>
        img {
            height: 440px;
            width: 440px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        li {
            float: left;
            margin-left: 20px;
            margin-top: 40px;

        }
    </style>

</head>

<body>
    <ul>
        <!-- <li>
            <a href="">
                <img src="" alt="">
                <p></p>
            </a>
        </li> -->
    </ul>
    <script>

        let url = "https://music.xuzhixiang.top/personalized";
        axios.get(url, { limit: 50 }).then((r) => {


            console.log(r);
            let str = ""
            r.data.result.forEach(function (i) {
                str +=
                    `
                <li>
            <a href="twoplaylist.html?id=${i.id}">
                <img src="${i.picUrl}" alt="">
                <p>${i.name}</p>
            </a>
        </li>
                `

            });
            let ual = document.querySelector("ul");
            ual.innerHTML = str;
        })
        // $("ul").html(str)



    </script>
</body>

</html>